<template>
	<view class="flex-nav">
		<view class="nav-item" v-for="(item , index) in navItem" :key="index" @click="goToClassify">
			<image :src="item.img" mode=""></image>
			<text>{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {routerGuard} from '@/config/RouteGuard.js'
	const navItem = ref([
		{img:'https://img.js.design/assets/img/66f1228a0c8862f00f766a3e.png#15e7e34425fb28c291fbdca6d480fb6f',text:'登山装备'},
		{img:'https://img.js.design/assets/img/66f2b34c0c8862f00fb6ddc2.png#09c262d9307e5e2436b6df868eb3d864',text:'背包专区'},
		{img:'https://img.js.design/assets/img/66f2b3f8fded5f840ccb2413.png#d6f756019f5a2a3446cef273fc24809b',text:'露营配件'}
	])
	
	const goToClassify = () =>{
		const url = `/homeSubpages/ProductClassify/ProductClassify`;
		routerGuard(url);
	}
</script>

<style lang="scss" scoped>
	.flex-nav{
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.nav-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 76rpx;
				height: 76rpx;
			}
			text{
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
</style>